<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .chat-message-user {
                @apply bg-blue-500 text-white rounded-lg rounded-tl-none p-4 max-w-[80%] self-end;
            }
            .chat-message-ai {
                @apply bg-gray-200 text-gray-800 rounded-lg rounded-tr-none p-4 max-w-[80%] self-start;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="bg-gray-100 h-screen flex flex-col">
    <div id="app" class="flex flex-col h-full">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm py-4 px-6 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-comments text-blue-500 text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">AI聊天系统</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="newChatBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center">
                    <i class="fa fa-plus mr-2"></i> 新对话
                </button>
                <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden">
                    <i class="fa fa-user text-gray-600"></i>
                </div>
            </div>
        </header>

        <div class="flex flex-1 overflow-hidden">
            <!-- 左侧对话列表 -->
            <aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
                <div class="p-4 border-b border-gray-200">
                    <div class="relative">
                        <input type="text" placeholder="搜索对话..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                <div id="conversationList" class="flex-1 overflow-y-auto scrollbar-hide p-2">
                    <!-- 对话列表项将通过Vue动态生成 -->
                    <div class="conversation-item p-3 rounded-lg cursor-pointer hover:bg-gray-100 transition duration-150">
                        <div class="font-medium text-gray-800 truncate">新对话</div>
                        <div class="text-sm text-gray-500 truncate">点击开始聊天</div>
                    </div>
                </div>
            </aside>

            <!-- 右侧聊天区域 -->
            <main class="flex-1 flex flex-col bg-gray-50">
                <div id="chatMessages" class="flex-1 overflow-y-auto p-6 space-y-6">
                    <!-- 欢迎消息 -->
                    <div class="flex justify-center">
                        <div class="bg-gray-200 text-gray-700 rounded-full px-4 py-1 text-sm">
                            今天是 {new Date().toLocaleDateString()}
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <div class="text-center max-w-md">
                            <div class="text-2xl text-blue-500 mb-4"><i class="fa fa-robot"></i></div>
                            <h2 class="text-xl font-bold text-gray-800 mb-2">欢迎使用AI聊天系统</h2>
                            <p class="text-gray-600 mb-6">我可以回答你的问题，帮助你解决问题，或者只是聊聊天。</p>
                            <div class="grid grid-cols-2 gap-3">
                                <button class="shortcut-question bg-white border border-gray-200 rounded-lg p-3 text-left hover:shadow-sm transition duration-150">
                                    <div class="font-medium text-gray-800">解释量子计算</div>
                                    <div class="text-sm text-gray-500">用简单的语言解释</div>
                                </button>
                                <button class="shortcut-question bg-white border border-gray-200 rounded-lg p-3 text-left hover:shadow-sm transition duration-150">
                                    <div class="font-medium text-gray-800">写一篇短文</div>
                                    <div class="text-sm text-gray-500">关于环境保护的重要性</div>
                                </button>
                                <button class="shortcut-question bg-white border border-gray-200 rounded-lg p-3 text-left hover:shadow-sm transition duration-150">
                                    <div class="font-medium text-gray-800">代码调试</div>
                                    <div class="text-sm text-gray-500">帮我看看这段Java代码</div>
                                </button>
                                <button class="shortcut-question bg-white border border-gray-200 rounded-lg p-3 text-left hover:shadow-sm transition duration-150">
                                    <div class="font-medium text-gray-800">旅行建议</div>
                                    <div class="text-sm text-gray-500">北京三日游攻略</div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 输入区域 -->
                <div class="bg-white border-t border-gray-200 p-4">
                    <div class="flex mb-2 text-gray-500">
                        <button class="p-2 hover:bg-gray-100 rounded-lg transition duration-150"><i class="fa fa-smile-o"></i></button>
                        <button class="p-2 hover:bg-gray-100 rounded-lg transition duration-150"><i class="fa fa-paperclip"></i></button>
                        <button class="p-2 hover:bg-gray-100 rounded-lg transition duration-150"><i class="fa fa-image"></i></button>
                        <div class="flex-1"></div>
                        <button class="p-2 hover:bg-gray-100 rounded-lg transition duration-150"><i class="fa fa-history"></i></button>
                    </div>
                    <div class="relative">
                        <textarea
                            id="messageInput"
                            placeholder="输入消息..."
                            class="w-full border border-gray-300 rounded-lg p-3 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                            rows="3"
                        ></textarea>
                        <button id="sendButton" class="absolute right-3 bottom-3 bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full transition duration-200">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="text-xs text-gray-500 mt-2 text-center">
                        按Shift+Enter换行，按Enter发送
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="./js/app.js"></script>
</body>
</html>